<template>
  <div class="box-yuyi">
    <div class="box-left">
      <container-nav :treeData="data" @handleNodeClick="handleNodeClick"></container-nav>
    </div>
    <div class="box-content">
      <div class="title">
        <label>{{title}}</label>
        <el-input v-model="srcLink" size="small" disabled class="input"></el-input>
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList">
          <el-button size="small" type="primary">选择图上传图片</el-button>
        </el-upload>
      </div>

      <div class="img-box">
        <img v-if="fileList.length>0" :src="fileList[0].url" alt="">
        <div v-else>此处展示上传后的图片</div>
      </div>
    </div>
  </div>
</template>

<script>
import ContainerNav from '../../../../../components/containerNav/containerNav'

export default {
  name: 'watermarkSignature',
  components: { ContainerNav },
  props: {
    title: {
      type: String,
      request: true
    }
  },
  data () {
    return {
      srcLink: '',
      fileList: [],
      data: [
        {
          value: '',
          label: '敏感数据',
          icon: 'el-icon-tickets',
          path: '/archivesManage/electronicsFile/book',
          children: [
            {
              value: 1,
              label: '一级部门1'
            }, {
              value: 2,
              label: '一级部门2'
            }
          ]
        }, {
          value: 3,
          label: '产权债权',
          icon: 'el-icon-s-promotion',
          path: '/archivesManage/electronicsFile/science',
          children: [
            {
              value: 4,
              label: '科技案卷'
            }, {
              value: 5,
              label: '科技卷内'
            }
          ]
        }, {
          value: 6,
          label: '公民隐私',
          icon: 'el-icon-picture-outline',
          path: '/archivesManage/electronicsFile/audioVideo',
          children: [
            {
              value: 7,
              label: '二级部门1'
            }, {
              value: 8,
              label: '二级部门2'
            }
          ]
        }, {
          value: 9,
          label: '负面信息',
          icon: 'el-icon-s-data',
          path: '/archivesManage/electronicsFile/material',
          children: [
            {
              value: 10,
              label: '二级部门1'
            }, {
              value: 11,
              label: '二级部门2'
            }
          ]
        }, {
          value: 12,
          label: '其他',
          icon: 'el-icon-date',
          path: '/archivesManage/electronicsFile/accounting',
          children: [
            {
              value: 13,
              label: '二级部门1'
            }, {
              value: 14,
              label: '二级部门2'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleNodeClick (val) {
      console.log(val)
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../../styles/mixin";

  .box-yuyi {
    height: 100%;

    .box-left, .box-content {
      border: 1px solid #DCDFE6;
      height: 100%;
    }

    .title {
      @include fj(flex-start);
      align-items: center;
      padding: 10px;
      position: relative;
      .input{
        width: 320px;
        margin: 0 10px;
      }
      ::v-deep .el-upload-list{
        position: absolute;
        height: 0;
        top: 50px;
        left: 80px;
        .is-success{
          display: none;
        }
      }
    }
    .img-box{
      @include imgBox(100%, calc(100% - 60px));
      border-radius: 6px;
      background: #e9e9e9;
      img{
        object-fit: none;
        max-height: 100%;
        max-width: 100%;
      }
    }
  }
</style>
